<template>
  <div class="flowlist">
    <form action="/">
      <van-search
        placeholder="请输入关键字"
        v-model="sval"
        clearable
        show-action
        @search="onSearch"
        @clear="onCancel"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <div style="height: 6vh">
      <van-tabs @click="tabFlowlist">
        <van-tab title="待办"></van-tab>
        <van-tab title="已办"></van-tab>
        <van-tab title="待发"></van-tab>
        <van-tab title="已发"></van-tab>
      </van-tabs>
    </div>
    <div
      v-show="actiontype === 'mytask' && actioncode === 'unhandle'"
      style="margin-top: 6vh"
    >
      <van-button
        type="info"
        size="small"
        @click="toggleAll"
        style="margin-left: 5vw"
        >全选</van-button
      >
      <van-button
        type="info"
        size="small"
        @click="openOptionView('agree')"
        style="margin-left: 5vw"
        >同意</van-button
      >
      <van-button
        type="info"
        size="small"
        @click="openOptionView('sendback')"
        style="margin-left: 5vw"
        >退回</van-button
      >
      <van-button
        type="info"
        size="small"
        @click="read()"
        style="margin-left: 5vw"
        >阅读</van-button
      >
    </div>
    <div
      v-show="actiontype === 'mysend' && actioncode === 'handle'"
      style="margin-top: 6vh"
    >
      <van-button
        type="info"
        size="small"
        @click="toggleAll('send')"
        style="margin-left: 5vw"
        >全选</van-button
      >
      <van-button
        type="info"
        size="small"
        @click="openOptionViewSend"
        style="margin-left: 5vw"
        >撤销</van-button
      >
    </div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :style="'margin-top:4vh;margin-bottom:8vh;'"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="已加载全部数据"
        @load="onLoad"
      >
        <template v-if="actiontype === 'mytask' && actioncode === 'unhandle'">
          <van-checkbox-group v-model="selecteddata" ref="checkboxGroup">
            <div style="display: table" v-for="item in list" :key="item.id">
              <van-checkbox
                style="
                  display: table-cell;
                  vertical-align: middle;
                  padding-left: 10px;
                "
                :name="item.idflow"
                slot="right-icon"
              />
              <van-cell
                style="display: table-cell; vertical-align: middle"
                clickable
                :value="item.value"
                :label="item.label"
                @click="openFlowCard(item)"
              >
                <span v-html="item.title"></span>
                <el-tag
                  v-if="item.procestype === '知会操作'"
                  style="margin-left: 10px"
                  size="mini"
                  >知会</el-tag
                >
              </van-cell>
            </div>
          </van-checkbox-group>
        </template>
        <template
          v-else-if="actiontype === 'mytask' && actioncode === 'handle'"
        >
          <van-swipe-cell v-for="item in list" :key="item.id">
            <van-cell
              :value="item.value"
              :label="item.label"
              @click="openFlowCard(item)"
            >
              <span v-html="item.title"></span>
              <el-tag
                v-if="item.procestype === '知会操作'"
                style="margin-left: 10px"
                size="mini"
                >知会</el-tag
              >
            </van-cell>
            <template slot="right">
              <van-button
                square
                type="info"
                text="取回"
                @click="flowBack(item)"
              />
            </template>
          </van-swipe-cell>
        </template>
        <template v-if="actiontype === 'mysend' && actioncode === 'handle'">
          <van-checkbox-group
            ref="checkboxGroup2"
            v-model="mySendSelected"
            type="btn-check"
            direction="horizontal"
          >
            <van-swipe-cell v-for="item in list" :key="item.id">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <van-checkbox
                  style="
                    width: 23px;
                    display: table-cell;
                    vertical-align: middle;
                    padding-left: 10px;
                  "
                  :name="`${item.idflow}_${item.idobject}`"
                />
                <van-cell
                  :value="item.value"
                  :label="item.label"
                  @click="openFlowCard(item)"
                >
                  <span v-html="item.title"></span>
                  <el-tag
                    v-if="item.procestype === '知会操作'"
                    style="margin-left: 10px"
                    size="mini"
                    >知会</el-tag
                  >
                </van-cell>
                <template slot="right">
                  <van-button
                    square
                    type="info"
                    text="取回"
                    @click="flowBack(item)"
                  />
                </template>
              </div>
            </van-swipe-cell>
          </van-checkbox-group>
        </template>
        <template
          v-else-if="actiontype === 'mysend' && actioncode === 'unhandle'"
        >
          <van-swipe-cell v-for="item in list" :key="item.id">
            <van-cell
              :value="item.value"
              :label="item.label"
              @click="openFlowCard(item)"
            >
              <span v-html="item.title"></span>
              <el-tag
                v-if="item.procestype === '知会操作'"
                style="margin-left: 10px"
                size="mini"
                >知会</el-tag
              >
            </van-cell>
            <template slot="right">
              <van-button
                square
                type="info"
                text="提交"
                @click="flowSubmit(item)"
              />
            </template>
          </van-swipe-cell>
        </template>
      </van-list>
    </van-pull-refresh>
    <van-popup v-model="optionshow" style="width: 80vw">
      <van-panel title="审批意见">
        <div>
          <van-field
            v-model="opinion"
            rows="1"
            autosize
            label="意见"
            type="textarea"
            placeholder="请输入"
          />
        </div>
        <div slot="footer" style="text-align: right">
          <van-button size="small" @click="execFlow">确认</van-button>
        </div>
      </van-panel>
    </van-popup>
    <van-popup v-model="optionshowSend" style="width: 80vw">
      <van-panel title="是否确认要进行撤销操作">
        <div slot="footer" style="text-align: right">
          <van-button size="small" @click="flowRevoke">确认</van-button>
        </div>
      </van-panel>
    </van-popup>
    <van-tabbar v-model="buttomactive" safe-area-inset-bottom>
      <van-tabbar-item icon="home-o" @click="menuChange('homepage')"
        >主页</van-tabbar-item
      >
      <van-tabbar-item icon="label-o" @click="menuChange('flowlist')"
        >审批</van-tabbar-item
      >
      <van-tabbar-item icon="qr" @click="menuChange('main')"
        >功能</van-tabbar-item
      >
      <van-tabbar-item icon="chart-trending-o" @click="menuChange('report')"
        >分析</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" @click="menuChange('mine')"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Search,
  List,
  Cell,
  PullRefresh,
  Toast,
  Tabbar,
  TabbarItem,
  Popup,
  Icon,
  SwipeCell,
  Dialog,
  Checkbox,
  CheckboxGroup,
  Panel,
  Tab,
  Tabs,
} from "vant";
import qs from "qs";
Vue.use(Search)
  .use(List)
  .use(Cell)
  .use(PullRefresh)
  .use(Toast)
  .use(Tabbar)
  .use(TabbarItem)
  .use(Popup)
  .use(Icon)
  .use(SwipeCell)
  .use(Dialog)
  .use(Checkbox)
  .use(CheckboxGroup)
  .use(Panel)
  .use(Tabs)
  .use(Tab);
export default {
  name: "flowlist",
  data() {
    return {
      mySendSelected: [],
      idobject: this.$route.query.idobject,
      actiontype: this.$route.query.actiontype,
      actioncode: this.$route.query.actioncode,
      sval: "",
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      active: 0,
      startline: 1,
      pagecount: 20,
      show: false,
      selecteddata: [],
      optionshow: false,
      optionshowSend: false,
      operation: "",
      opinion: "",
      isDisable: false,
      buttomactive: 1,
    };
  },
  methods: {
    flowRevoke() {
      let idobject = [];
      let idflow = [];
      if (this.mySendSelected.length <= 0) return Toast("请先进行选择");
      this.mySendSelected.forEach((i) => {
        let newI = JSON.parse(JSON.stringify(i)).split("_");
        console.log(i);
        idobject.push(newI[1]);
        idflow.push(newI[0]);
      });
      let params = {
        idobject: idobject.join(';'),
        idflow: idflow.join(';'),
      };

      Toast.loading({
        message: "处理中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: "/api/flowclmx.stop.do",
        data: qs.stringify(params),
      })
        .then((res) => {
          //console.log(res)
          if (res.data.flag === "1") {
            if (res.data.des && res.data.des.indexOf("登录过期") >= 0) {
              this.loginout();
            }
          }
          this.optionshowSend = false
          this.mySendSelected = [];
        })
        .catch((res) => {
          this.optionshowSend = false
          Toast(res);
        });
    },
    onLoad() {
      if (this.actiontype === "") {
        this.actiontype = "mytask";
      }
      if (this.actioncode === "") {
        this.actioncode = "unhandle";
      }
      let data = {
        actiontype: this.actiontype,
        actioncode: this.actioncode,
        startline: this.startline,
        pagecount: this.pagecount,
        condition: this.sval,
      };
      this.axios({
        method: "post",
        url: "/api/" + this.idobject + ".list.do",
        data: qs.stringify(data),
      })
        .then((res) => {
          //console.log(res)
          if (res.data.flag === "1") {
            Toast(res.data.des);
            if (res.data.des && res.data.des.indexOf("登录过期") >= 0) {
              this.loginout();
            }
          } else {
            let rsdata = res.data.jsondata.approvallist;
            for (let i = 0; i < rsdata.length; i++) {
              this.list.push(rsdata[i]);
            }
            if (
              rsdata == null ||
              rsdata.length === 0 ||
              rsdata.length < this.pagecount
            ) {
              this.loading = false;
              this.finished = true;
            } else {
              this.startline = this.startline + rsdata.length;
              this.loading = false;
            }
          }
        })
        .catch((res) => {
          this.reserror(res);
        });
    },
    onRefresh() {
      this.list = [];
      this.startline = 1;
      this.finished = false;
      this.loading = true;
      this.isLoading = false;
      this.onLoad();
    },
    menuChange(option) {
      if (option === "flowlist") {
        this.$router.push({
          name: "flowlist",
          query: {
            idobject: "flowclmx",
            actiontype: "mytask",
            actioncode: "unhandle",
            stitle: "flowclmx",
          },
        });
      } else if (option === "report") {
        this.$router.push({
          name: "reportlist",
          query: { idobject: "report", stitle: "report" },
        });
      } else if (option === "main") {
        this.$router.push({ name: "main" });
      } else if (option === "homepage") {
        this.$router.push({ name: "homepage" });
      } else if (option === "mine") {
        this.$router.push({ name: "mine" });
      }
    },
    onSearch() {
      this.list = [];
      this.startline = 1;
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    onCancel() {
      this.sval = "";
    },
    tabFlowlist(name, title) {
      let type = "";
      let code = "";
      if (title === "待办") {
        type = "mytask";
        code = "unhandle";
      } else if (title === "已办") {
        type = "mytask";
        code = "handle";
      } else if (title === "待发") {
        type = "mysend";
        code = "unhandle";
      } else if (title === "已发") {
        type = "mysend";
        code = "handle";
      }
      this.actiontype = type;
      this.actioncode = code;
      this.list = [];
      this.startline = 1;
      this.finished = false;
      this.loading = true;
      this.isLoading = false;
      this.onLoad();
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
      //console.log(this.selecteddata)
    },
    toggleAll(type) {
      if (type == "send") {
        this.$refs.checkboxGroup2.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll(true);
      }
    },
    openFlowCard(item) {
      this.$router.push({
        name: "flowcard",
        query: {
          idobject: item.idobject,
          idbill: item.id,
          idflow: item.idflow,
          actiontype: this.actiontype,
          actioncode: this.actioncode,
          title: item.title,
          procestype: item.procestype,
        },
      });
    },
    flowSubmit(item) {
      if (!this.isDisable) {
        this.isDisable = true;
        let data = {
          id: item.id,
          idflow: item.idflow,
          idobject: item.idobject,
        };
        this.axios({
          method: "post",
          url: "/api/flowclmx.submit.do",
          data: qs.stringify(data),
        })
          .then((res) => {
            //console.log(res)
            Toast(res.data.jsondata);
            this.isDisable = false;
            this.onRefresh();
          })
          .catch((res) => {
            this.isDisable = false;
            //console.log(res)
          });
      }
    },
    flowBack(item) {
      if (!this.isDisable) {
        this.isDisable = true;
        let data = {
          id: item.id,
          idflow: item.idflow,
          idobject: item.idobject,
        };
        this.axios({
          method: "post",
          url: "/api/flowclmx.back.do",
          data: qs.stringify(data),
        })
          .then((res) => {
            //console.log(res)
            Toast(res.data.jsondata);
            this.isDisable = false;
            this.onRefresh();
          })
          .catch((res) => {
            this.isDisable = false;
            //console.log(res)
          });
      }
    },
    openOptionView(operation) {
      if (this.selecteddata.length === 0) {
        Toast("请先选择数据");
        return;
      }
      this.optionshow = true;
      this.operation = operation;
    },
    openOptionViewSend() {
      if (this.mySendSelected.length === 0) {
        Toast("请先选择数据");
        return;
      }
      this.optionshowSend = true;
    },
    execFlow() {
      if (this.operation === "agree") {
        this.flowAgree();
      } else if (this.operation === "sendback") {
        this.flowSendback();
      } else if (this.operation === "read") {
        this.flowRead();
      }
    },

    flowAgree() {
      if (!this.isDisable) {
        this.isDisable = true;
        let batchoperation = "";
        for (let i = 0; i < this.selecteddata.length; i++) {
          batchoperation += this.selecteddata[i] + ";";
        }
        let data = { opinion: this.opinion, batchoperation: batchoperation };

        Toast.loading({
          message: "处理中...",
          forbidClick: true,
          duration: 0,
        });

        this.axios({
          method: "post",
          url: "/api/flowclmx.agree.do",
          data: qs.stringify(data),
        })
          .then((res) => {
            //console.log(res)
            Toast(res.data.des);
            if (res.data.flag === "1") {
              if (res.data.des && res.data.des.indexOf("登录过期") >= 0) {
                this.loginout();
              }
            }
            this.isDisable = false;
            this.onRefresh();
            this.optionshow = false;
            this.opinion = "";
            this.selecteddata = [];
          })
          .catch((res) => {
            this.isDisable = false;
            //console.log(res)
            Toast(res);
          });
      }
    },
    read() {
      let batchoperation = "";
      for (let i = 0; i < this.selecteddata.length; i++) {
        batchoperation += this.selecteddata[i] + ";";
      }
      let data = { batchoperation: batchoperation };
      this.axios({
        method: "post",
        url: "/api/flowclmx.read.do",
        data: qs.stringify(data),
      })
        .then((res) => {
          //console.log(res)
          Toast(res.data.des);
          if (res.data.flag === "1") {
            if (res.data.des && res.data.des.indexOf("登录过期") >= 0) {
              this.loginout();
            }
          }
          this.onRefresh();
          this.selecteddata = [];
        })
        .catch((res) => {
          //console.log(res)
          Toast(res);
        });
    },
    flowSendback() {
      if (!this.isDisable) {
        this.isDisable = true;
        let batchoperation = "";
        for (let i = 0; i < this.selecteddata.length; i++) {
          batchoperation += this.selecteddata[i] + ";";
        }
        let data = { opinion: this.opinion, batchoperation: batchoperation };
        Toast.loading({
          message: "处理中...",
          forbidClick: true,
          duration: 0,
        });
        this.axios({
          method: "post",
          url: "/api/flowclmx.batsendback.do",
          data: qs.stringify(data),
        })
          .then((res) => {
            //console.log(res)
            Toast(res.data.des);
            if (res.data.flag === "1") {
              if (res.data.des && res.data.des.indexOf("登录过期") >= 0) {
                this.loginout();
              }
            }
            this.isDisable = false;
            this.onRefresh();
            this.optionshow = false;
            this.opinion = "";
            this.selecteddata = [];
          })
          .catch((res) => {
            this.isDisable = false;
            //console.log(res)
            Toast(res);
          });
      }
    },
  },
};
</script>
<style scoped>
.L-flow-row {
  width: 100%;
}

.L-flow-row .checkbox-item {
  width: 80px;
  text-align: center;
}

.L-flow-row .content-item {
  font-size: 16px;
  line-height: 26px;
}
</style>
